<!DOCTYPE html>
<html>
<head>
    <title>Custom validation</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <div id="example">
            <div class="demo-section k-header">            
                <form id="employeeForm" data-role="validator" novalidate="novalidate">
                    <h4>Employee</h4>
                    <ul>
                        <li>
                            <label for="FirstName">First Name:</label>
                            <input type="text" class="k-textbox" name="FirstName" id="FirstName" required="required" />
                        </li> 
                        <li>
                            <label for="LastName">Last Name:</label>
                            <input type="text" class="k-textbox" name="LastName" id="LastName" required="required" />
                        </li>   
                        <li>
                            <label for="HireDate">Hire Date:</label>
                            <input type="text" data-role='datepicker' id="HireDate" name="HireDate" data-type="date" required="required"  />
                            <span data-for='HireDate' class='k-invalid-msg'></span>
                        </li> 
                        <li>
                            <label for="RetireDate">Retire Date:</label>
                            <input type="text" data-role='datepicker' id ="RetireDate" data-type="date" name="RetireDate" data-greaterdate-field="HireDate" data-greaterdate-msg='Retire date should be after Hire date' />
                            <span data-for='RetireDate' class='k-invalid-msg'></span>
                        </li> 
                        <li class="actions">
                             <button type="button" data-role="button" data-sprite-css-class="k-icon k-i-tick" data-click='save'>Save</button>
                        </li>       
                    </ul>
                </form>
            </div>                      

            <script type="text/javascript">
                $(function () {
                    var container = $("#employeeForm");
                    kendo.init(container);
                    container.kendoValidator({
                        rules: {
                            greaterdate: function (input) {
                                if (input.is("[data-greaterdate-msg]") && input.val() != "") {                                    
                                    var date = input.data("kendoDatePicker").value(),
                                        otherDate = $("[name='" + input.data("greaterdateField") + "']").data("kendoDatePicker").value();
                                    return otherDate == null || otherDate.getTime() < date.getTime();
                                }

                                return true;
                            }
                        }
                    });
                });

                function save(e) {
                    var validator = $("#employeeForm").data("kendoValidator");
                    if (validator.validate()) {
                        alert("Employee Saved");
                    }
                }
            
            </script>    
   
            <style scoped>

                #employeeForm ul {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                }

                #employeeForm li {
                    margin-top: 10px;
                }

                label {
                    display: inline-block;
                    padding-right: 3px;
                    width: 100px;
                }
            
                span.k-tooltip {
                    margin-left: 6px;
                }

                .demo-section {
                    width: 500px;
                }

                .actions {                    
                    padding-left: 106px;
                    padding-top: 10px;
                }
            </style>
        </div>


    
    
</body>
</html>
